<template>
  <div>
    <page-bg class="page-bg" title="时间轴"></page-bg>
    <n-grid item-responsive>
      <n-gi span="1 800:1 1200:4" />
      <n-gi span="22 800:22 1200:16">
        <div class="timeline" :class="sideTheme">
          <timeline-title></timeline-title>
          <div v-for="item in list" :key="item.id">
            <timeline-time v-if="item.type=='time'" :time="item.time"></timeline-time>
            <timeline-item v-else :data="item"></timeline-item>
          </div>
        </div>
      </n-gi>
      <n-gi span="1 800:0" />
    </n-grid>

    <pagination
      v-show="total>0" 
      :total="total" 
      v-model:page="pageNum" 
      v-model:limit="pageSize" 
      @pagination="getList"
    ></pagination>
  </div>
</template>

<script setup name="Timeline">
import PageBg from "@/components/PageBg/index.vue"
import Card from "@/components/Card/index.vue"
import TimelineItem from './components/TimelineItem.vue'
import TimelineTitle from './components/TimelineTitle.vue'
import TimelineTime from './components/TimelineTime.vue'
import Pagination from "@/components/Pagination/index.vue"
import { useSettingsStore } from "@/store"
import { getArticle } from "@/api/home.js"
import { ref, onMounted } from 'vue'

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const list = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getList = () => {
  list.value = [];
  getArticle({
    pageNum:pageNum.value,
    pageSize:pageSize.value
  }).then(res=>{
    res.list.forEach( (J,index) => {
      if (index>0 && res.list[index-1].createTime.split('-')[0]!=J.createTime.split('-')[0]) {
        list.value.push({
          time:J.createTime.split('-')[0],
          type:'time'
        },{
          ...J,
          type:'item'
        })
      } else {
        list.value.push({
          ...J,
          type:'item'
        })
      }
    });
    list.value.unshift({type:'time',time:res.list[0].createTime.split('-')[0]});
    console.log(list.value);
    total.value = res.total;
  })
}
onMounted(()=>{
  getList();
})
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.page-bg {
  width: 100%;
  height: 400px;
}
.timeline {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5);
  color: #FFFFFFB3 !important;
}
</style>